<!--分页表格-->
<template>
    <div id="pageTable">
        <el-table ref="pageTable"
                  :data="tableData"
                  v-loading="loading"
                  @cell-click="cellClick"
                  header-cell-class-name="table-header-cell"

        >
            <template v-for="(item,index) in tableHeader">
                <el-table-column :key="index"
                                 :label="item.label"
                                 :width="item.width"
                >
                    <template slot-scope="scope">
                        <div v-if="item.highlight === true"><!--高亮显示-->
                            <span style="cursor:pointer;color: deepskyblue; text-decoration:underline;">
                              {{scope.row[item.key]}}
                            </span>
                        </div>
                        <div v-else>
                            <!-- 按钮事件操作 -->
                            <div v-if="item.optFlag">
                                <!-- <el-button
                                         v-for="(item2,index2) in item.buttons"
                                         :key="index2"
                                         @click.native.prevent="item2.event(scope.row)"
                                         :disabled="typeof item2.disabled ==='function'?(item2.disabled && item2.disabled(scope.row)):item2.disabled"
                                         v-if="typeof item2.show ==='function'?(item2.show && item2.show(scope.row)):item2.show"
                                         type="text"
                                         size="mini">
                                     {{item2.label}}
                                 </el-button>-->
                            </div>
                            <!-- 纯展示数据 -->
                            <span v-else-if="!item.formatData && !item.style">{{ scope.row[item.key] }}</span>
                            <!-- 纯展示数据,tableHeader中可传入 想要的样式 -->
                            <span v-else-if="item.style" :style="{color:item.style.color, cursor:item.style.cursor}">{{ scope.row[item.key] }}</span>
                            <!-- 需要格式化的数据结构 -->
                            <span v-else>{{ scope.row[item.key] | formatters(item.formatData,scope.row) }}</span>
                        </div>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <div class="block">
            <el-pagination
                    v-if="pageShow"
                    @current-change="tablePageChange"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    background
                    layout="total,prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'PageTable',
        props: {
            tableHeader: {
                type: Array, // 指定传入的类型
                default() {
                    return []
                }
            },
            tableData: {
                type: Array,
                default() {
                    return []
                }
            },
            loading: {
                type: Boolean,
                default() {
                    return false
                }
            },
            total: {
                type: Number,
                default() {
                    return 0
                }
            },
            pageSize: {
                type: Number,
                default() {
                    return 10
                }
            },
            currentPage: {
                type: Number,
                default() {
                    return 1
                }
            },
            pageShow: {
                type: Boolean,
                default() {
                    return true
                }
            }
        },
        filters: {
            formatters(val, format, row) {
                if (typeof (format) === 'function') {
                    return format(val, row)
                } else return val
            }
        },
        watch: {
            currentPage: {
                handler() {
                    console.log(this.currentPage)
                },
                deep: true
            }
        },
        methods: {
            tablePageChange(currentPage) {
                // 当前页码变动触发
                this.$emit('query', currentPage, this.pageSize)
            },
            cellClick(row, column, cell, event) {
                this.$emit('cellClick', row, column, cell, event)
            },
        }
    }
</script>
<style lang="scss" scoped>
    #pageTable {
        /deep/ .table-header-cell {
            background: #F2F5FB;
        }

        .block {
            margin: 15px 0;
            text-align: right;
        }
    }
</style>

